import React, { Component, createRef } from 'react'
import styles from './index.less'
import { CanvasContext } from '@/Context'
import { isTextComponent } from '@/constants'
import Lines from './Lines'
import StretchDots from './StretchDots'
import Rotate from './Rotate'
import ContextMenu from './ContextMenu'
export default class EditLine extends Component {
	static contextType = CanvasContext

	constructor(props) {
		super(props)
		this.state = { textareaFocused: false, showContextMenu: false }
		this.textareaRef = createRef()
	}

	componentDidUpdate(prevProps, prevState, snapshot) {
		// console.log(prevProps, this.props)
		// 这个值一直一样不知道为啥
		// 切换选中组件的时候，如果右键出现的菜单栏出现，则藏掉
		if (
			prevProps.selectedIndex !== this.props.selectedIndex &&
			this.state.showContextMenu
		) {
			this.hideShowContextMenu()
		}
	}

	// 文本框选择
	valueChange = e => {
		const newValue = e.target.value
		// 如果改变文本高度，则调整组件框高度
		const textHeight = this.textareaRef.current.scrollHeight
		this.context.updateSelectedCmp({ height: textHeight }, newValue)
		this.context.recordCanvasChangeHistory()
	}

	onMouseDownOfCmp = e => {
		if (this.state.textareaFocused) {
			return
		}
		// e.stopPropagation()
		e.preventDefault()

		let startX = e.pageX
		let startY = e.pageY

		const { zoom } = this.props
		// 如果有缩放,位置要根据缩放变化,但是存储时应该将缩放变换回来
		const move = e => {
			const x = e.pageX
			const y = e.pageY

			let disX = x - startX
			let disY = y - startY

			disX = disX * (100 / zoom)
			disY = disY * (100 / zoom)

			this.context.updateAssemblyCmps({ top: disY, left: disX })
			startX = x
			startY = y
		}
		const up = () => {
			document.removeEventListener('mousemove', move)
			document.removeEventListener('mouseup', up)
			this.context.recordCanvasChangeHistory()
		}
		document.addEventListener('mousemove', move)
		document.addEventListener('mouseup', up)
	}

	handleShowContextMenu = e => {
		e.stopPropagation()
		e.preventDefault()
		this.setState({ showContextMenu: true })
	}

	hideShowContextMenu = e => {
		this.setState({ showContextMenu: false })
	}

	render() {
		const { zoom } = this.props
		const cmp = this.context.getSelectedCmp()
		if (!cmp) {
			// 没有选择线
			return null
		}

		const { style } = cmp
		const { width, height } = style
		const transform = `rotate(${style.transform}deg)`
		// width height 组件本身的宽高
		// 线宽3
		return (
			<div
				className={styles.main}
				style={{
					zIndex: 99999,
					width,
					height,
					top: style.top,
					left: style.left,
					transform,
				}}
				onDoubleClick={e => {
					this.setState({
						textareaFocused: !this.state.textareaFocused,
						showContextMenu: false,
					})
				}}
			>
				{/* 如果组件是文本组件,并且双击后文本框的焦点为true 那么显示文本组件此 否则显示一个拖拽层避免dom混合事件 */}
				{cmp.type === isTextComponent && this.state.textareaFocused ? (
					<textarea
						ref={this.textareaRef}
						value={cmp.value}
						onChange={this.valueChange}
						onBlur={() => {
							// 失去焦点
							this.setState({ textareaFocused: false })
						}}
						style={{
							...style,
							width,
							height,
							top: 0,
							left: 0,
						}}
					></textarea>
				) : (
					// 拖拽事件的蒙层
					<div
						className={style.eventMask}
						style={{
							width,
							height,
						}}
						onMouseDown={this.onMouseDownOfCmp}
						onContextMenu={this.handleShowContextMenu}
					></div>
				)}
				{/* 右键菜单功能区域 */}
				{this.state.showContextMenu && (
					<ContextMenu
						style={{
							top: 2,
							left: width / 2,
							transform: `scale(${100 / zoom}) rotate(${
								0 - style.transform
							}deg)`,
						}}
					/>
				)}

				{/* 选中组件的边界线 抽离到新的组件上 */}
				<Lines style={{ width, height }} />

				{/* 八个边界选中点抽离 */}
				<StretchDots
					zoom={zoom}
					cmp={cmp}
					style={{
						width,
						height,
						transform: `scale(${100 / zoom})`,
					}}
				/>

				{/* 旋转标记图 */}
				<Rotate
					zoom={zoom}
					style={{ width, height, transform: `scale(${100 / zoom})` }}
				/>
			</div>
		)
	}
}
